import React, {
  Component,
  useState,
  useEffect,
} from "react";
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
} from "react-native";
import Content from "../../components/content/content";
import styles from "./account-sheet";
import * as api from "../../api";

export default function Account(props) {
  const [old, setOld] = useState({
    show: false,
    account: '',
    name: '',
  });

  useEffect(() => {
    global.showLoading();
    api.getAlipay().then((res) => {
      if (res && res.alipay_account) {
        const {
          alipay_account,
          realname,
        } = res;
        setOld({
          account: alipay_account,
          name: realname,
          show: true,
        });
      }
    }).catch(rej => {
      global.showToast(rej);
    }).finally(() => {
      global.closeLoading();
    });
  }, []);

  const submit = () => {
    const name = this.name._lastNativeText;
    const account = this.account._lastNativeText;
    if (!name || !account) {
      global.showToast("姓名或账号不能为空");
      return;
    }
    global.showLoading();
    api.setAlipay({
      alipay_account: account,
      realname: name,
    }).then(() => {
      global.showToast('绑定成功');
      props.navigation.goBack();
    }).catch(rej => {
      global.showToast(rej);
    }).finally(() => {
      global.closeLoading();
    });
  };

  renderAccount = () => {
    return (
      <View>
        <View style={[styles.input, styles.marginTop20]}>
          <Text>支付宝姓名: </Text>
          <Text style={{marginLeft:10}}>{old.account}</Text>
        </View>
        <View style={[styles.input, styles.marginTop20]}>
          <Text>支付宝账号: </Text>
          <Text style={{marginLeft:10}}>{old.name}</Text>
        </View>
      </View>
    );
  };

  return (
    <Content>
      <View style={styles.content}>
        {old.show?renderAccount():null}
  		  <View style={[styles.input, styles.marginTop20]}>
          <View style={styles.inputTitle}>
            <Text>支付宝姓名: </Text>
          </View>
          <View style={styles.inputText}>
            <TextInput maxLength={32} 
               autoCapitalize="none" 
               placeholder="请输入支付宝姓名" 
               style={styles.inputTextC}
               ref={r=>{this.name=r}}
            />
          </View>
        </View>

        <View style={[styles.input, styles.marginTop20]}>
          <View style={styles.inputTitle}>
            <Text>支付宝账号: </Text>
          </View>
          <View style={styles.inputText}>
            <TextInput maxLength={32} 
              autoCapitalize="none" 
              placeholder="请输入支付宝账号" 
              style={styles.inputTextC}
              keyboardType='numeric'
              ref={r=>{this.account=r}}
            />
          </View>
        </View>

        <View style={[styles.marginTop20, styles.buttonContent]}>
          <TouchableOpacity onPress={submit} style={styles.button}>
            <Text style={styles.buttonText}>{old.show?'重新绑定':'绑定'}</Text>
          </TouchableOpacity>
        </View>
      </View>
		</Content>
  )
}